<template>
	<!-- 联系客服 -->
	<Teleport to="body">
		<Transition name="contact-fade">
			<uni-popup ref="contactPopup" type="center" :mask-click="true">
				<view class="contact-popup">
			<view class="popup-header">
				<text class="title">联系客服</text>
				<view class="close-btn" @click="handleCloseContact">
					<uni-icons type="close" size="20" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="popup-content">
				<view class="contact-item" v-for="item in contactList" :key="item">
					<view class="icon-wrapper">
						<uni-icons type="phone-filled" size="24" color="#4a90e2"></uni-icons>
					</view>
					<view class="contact-info">
						<text class="value">{{ item }}</text>
					</view>
				</view>
			</view>
			</view>
			</uni-popup>
		</Transition>
	</Teleport>
</template>
<script setup>
	// 引用
	const contactPopup = ref(null);

	// 联系客服列表
	const contactList = ref([]);

	// 打开联系客服弹窗
	const openContact = () => {
		contactPopup.value.open();
	};

	// 关闭联系客服弹窗
	const handleCloseContact = () => {
		contactPopup.value.close();
	};

	// 拨打电话
	const handleCall = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		});
	};

	// 获取公司信息
	onMounted(() => {
		// 获取公司信息
		const phone = useCompanyStore().GetCurCompanyInfo().lxdh;
		if (phone) contactList.value = phone.split(',');
	});

	// 暴露方法供父组件调用
	defineExpose({
		openContact,
	});
</script>
<style lang="scss" scoped>
	.contact-popup {
		width: 350px;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);

		.contact-fade-enter-active,
		.contact-fade-leave-active {
			transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.contact-fade-enter-from,
		.contact-fade-leave-to {
			opacity: 0;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 24px;
			background: linear-gradient(135deg, #4a90e2, #357abd);

			.title {
				font-size: 18px;
				font-weight: 600;
				color: #fff;
			}

			.close-btn {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				transition: all 0.3s;
				
				&:active {
					background: rgba(255, 255, 255, 0.1);
				}
			}
		}

		.popup-content {
			padding: 24px;

			.contact-item {
				display: flex;
				align-items: center;
				gap: 16px;
				padding: 20px;
				background: #f8f9fc;
				border-radius: 12px;
				margin-bottom: 16px;
				transition: all 0.3s;

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
				}

				.icon-wrapper {
					width: 48px;
					height: 48px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(74, 144, 226, 0.1);
					border-radius: 12px;
				}

				.contact-info {
					flex: 1;
					
					.value {
						font-size: 14px;
						font-weight: 600;
						color: #333;
					}
				}

				.call-btn {
					display: flex;
					align-items: center;
					gap: 6px;
					padding: 8px 16px;
					background: #4a90e2;
					border-radius: 8px;
					font-size: 14px;
					color: #fff;
					transition: all 0.3s;

					&:active {
						transform: scale(0.96);
						background: #357abd;
					}
				}
			}

			.contact-tips {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-top: 20px;
				padding: 12px;
				background: #f8f9fc;
				border-radius: 8px;
				font-size: 14px;
				color: #999;
			}
		}
	}
</style>
